<template>
  <view
    class="activity-list">
    <view class="list-container">
      <view
        v-if="listData.length === 0"
        :style="{backgroundImage: bgUrl('images/no_data.png'), height: contentHeight + 'px'}"
        class="no-data" />

      <template v-if="(queryType === 1&&listOver) || true">
        <view
          v-for="(item, index) in listData"
          :key="index"
          class="activity-item">
          <view
            v-if="item.createUser"
            class="user-info">
            <wk-avatar
              :name="item.createUser.realname"
              :avatar="item.createUser.img"
              :size="14"
              class="avatar" />
            <view class="info">
              <view class="username">
                {{ item.createUser.realname }}
              </view>
              <view class="text">
                {{ formatTime(item.createTime) }}
              </view>
            </view>
            <!-- <view
              v-if="item.category"
              class="category">
              {{ item.category }}
            </view> -->
          </view>
          <view>
            <!-- TODO desc要改成json格式优化性能？？ -->
            <rich-text :nodes="item.desc" />
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  // import {GetCrmActivityPageList} from 'API/crm/crmActivity'
  // import LogItem from '@/components/base/log-item.vue'
  // import QuotaNoticeItem from './quotaNoticeItem.vue'
  import {srmXjOrderRemarkList} from 'API/inqueryMessage'

  import { isObject } from '@/utils/types.js'
  import moment from 'moment'

  export default {
    name: 'QuotaNotice',
    components: {
      // LogItem,
      // ActivityListItem
    },
    props: {
      detailId: {
        type: [Number, String],
        required: false
      },
      type: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        dropValue: -1,
        queryType: 1,

        dateFilter: 'all',
        filterDate: {
          endDate: '',
          startDate: '',
        },
        timeValue: '',
        dateField: null,

        listData: [],
        listOver: false,
        page: 0,

        contentHeight: 0,

      }
    },
    computed: {
    },
    watch: {
      queryType: {
        handler(val) {
          this.getList(true)
        },
        immediate: true
      }
    },
    mounted() {
      const that = this
      uni.createSelectorQuery()
        .in(this)
        .select('.list-container')
        .boundingClientRect(data => {
          // 计算无数据时填充区域高度
          const clientHeight = uni.getSystemInfoSync().windowHeight
          this.contentHeight = clientHeight - data.top - uni.upx2px(38)
        })
        .exec()
      this.getList()
    },
    methods: {
      bgUrl(val) {
        return `url(${this.$static(val)})`
      },

      formatTime(time) {
        if (!time) return ''
        return moment(time).format('YYYY-MM-DD HH:mm')
      },

      /**
       * 获取列表数据
       */
      getList(refresh = false) {
        srmXjOrderRemarkList({
          page: 1,
          limit: 1000,
          objMap: {
            orderId: this.detailId
          }
			
        }).then(res => {
          this.listData = []
          if (res.data != undefined && res.data instanceof Array) {
            res.data.forEach((item, index) => {
              index += 1
              this.listData.push({
                createUser: {
                  realname: '报价须知 ' + index,
                  img: undefined,
                },
                category: 'testCate',
                createTime: item.createTime,
                desc: item.orderRemark
              })
            })
          }
        })
      },
	  
    }
  }
</script>

<style scoped lang="scss">
.activity-list {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  padding: 38rpx 32rpx;
  border-radius: 18rpx 18rpx 0 0;

  .drop-wrapper {
    width: 100%;
    margin-bottom: 15rpx;
    @include left;
    .btn-group {
      flex: 1;
      @include left;
      .btn-group-item {
        padding: 5rpx 10rpx;
        margin: 0 5rpx;
        font-size: $wk-font-sm;
        border-radius: 5rpx;
        &.active {
          background-color: #344563;
          color: white;
        }
      }
    }

    .filter {
      font-size: $wk-font-sm;
      @include right;
      .pic {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .text {
        margin-right: 10rpx;
      }
      .icon {
        font-size: $wk-font-sm;
        transform: rotate(90deg);
      }
    }
  }

  .list-container {
    .activity-item {
      border-bottom: 1rpx solid $border-color !important;
      padding: 15rpx 0 20rpx !important;
      margin-bottom: 20rpx;
      &:last-child {
        border-bottom: 0 none;
        padding-bottom: 0;
      }

      .user-info {
        @include left;
        .avatar {
          width: 65rpx;
          height: 65rpx;
        }
        .info {
          flex: 1;
          margin-left: 16rpx;
          .username {
            font-size: $wk-font-base;
            color: #333;
						@include left;
						.dynamic-name {
							margin-left: 10rpx;
						}
          }
          .text {
            font-size: $wk-font-mini;
            color: $light;
          }
        }
        .category {
          font-size: $wk-font-mini;
          color: $light;
          background-color: #EEEEEE;
          border-radius: 5rpx;
          padding: 5rpx 15rpx;
        }
      }

      .content {
        font-size: 26rpx;
        color: #666;
        margin-top: 20rpx;
        padding-left: 10rpx;

        &.record, &.legwork-content {
          .special {
            color: $theme-color;
          }
        }
      }
    }
  }

  .wk-drag-btn {
    .icon {
      font-size: 30rpx;
      line-height: 1.2;
    }
    .text {
      font-size: 22rpx;
    }
  }

  .no-data {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #BBBBBB;
    background-position: center 200rpx;
    background-repeat: no-repeat;
    background-size: 36%;
  }

  .filter-popup {
    padding: 36rpx;

    .popup-header {
      position: relative;
      @include center;
      .text {
        font-size: $wk-font-large;
      }
      .icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: $gray;
        font-size: $wk-font-medium;
      }
    }

    .popup-content {
      width: 100%;
      flex-wrap: wrap;
      margin-top: 38rpx;
      @include left;
      .btn-group {
				width: 100%;
				@include center;
        position: absolute;
        bottom: 0rpx;
        left: 0;
        right: 0;
        padding:0 38rpx 30rpx;
        background: white;
        border-top: 1px solid white;
				.button {
					flex: 1;
					height: 80rpx;
					color: white;
					font-size: $wk-font-base;
					background-color: $theme-color;
					border-radius: 12rpx;
					@include center;
        }
			}

      .popup-content__item {
        width: 17%;
        flex-direction: column;
        margin: 25rpx 4%;
        @include center;
        .pic {
          width: 60rpx;
          height: 60rpx;
        }
        .text {
          color: $dark;
          font-size: $wk-font-base;
          margin-top: 10rpx;
        }
      }

      .filter-time {
				flex: 1;
				width: 100%;
        height: 560rpx;
				.title {
					font-size: $wk-font-base;
					font-weight: bold;
					color: $dark;
				}

				.time-container {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.box-item {
						width: 32%;
						height: 60rpx;
						color: #666;
						font-size: $wk-font-base;
						background-color: #f4f4f4;
						border-radius: 10rpx;
						margin-top: 20rpx;
						@include center;

						&.active {
							color: $theme-color;
							background-color: #E7F0FF;
						}
						&.empty {
							visibility: hidden;
						}
					}
				}

        .defined-filter {
					font-size: $wk-font-base;
					margin-top: 25rpx;
					@include left;

					.time-box {
						flex: 1;
						text-align: center;
						border: 1rpx solid #E1E1E1;
						border-radius: 6rpx;
						padding: 10rpx 15rpx;
						@include left;

						&.active {
							color: #333;
						}

						.calendar-icon {
							width: 38rpx;
							height: 38rpx;
							margin-right: 10rpx;
						}
						.wk-placeholder {
							font-size: inherit;
						}
					}
					.ident {
						color: #CDCDCD;
						padding: 0 30rpx;
					}
				}
      }
    }
  }
}
</style>
